<template>
    <div>
        <!-- 下拉框和按钮 -->
        <div class="select">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-row>
                    <el-col :span="16">
                        <el-form-item>
                            <el-select clearable v-model="form.status" placeholder="请选择会费缴纳状态">
                                <!-- 设置value值是为了唯一标识选项的name -->
                                <el-option label="已缴清" value="审核成功"></el-option>
                                <el-option label="未缴纳" value="未审核"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select clearable v-model="form.categoryId" placeholder="请选择城市">
                                <el-option v-for="item in categories" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input clearable v-model="form.title" placeholder="请输入餐厅关键字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="text-align: right;">
                        <el-form-item>
                            <el-button type="primary" @click="$router.push('/info/publish')">餐厅登记</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 第二行  表格组件 -->
        <div class="table">
            <el-table :data="articleData" style="width: 100%">
                <!-- 序号 -->
                <el-table-column type="index" :index="1" label="序号" width="60">
                </el-table-column>

                <!-- 餐厅封面 -->
                <el-table-column label="餐厅展示" width="140">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" width="120px" height="60px" alt="">
                    </template>
                </el-table-column>

                <!-- 餐厅介绍 -->
                <el-table-column label="餐厅介绍" width="1200">
                    <!-- 作用域插槽 -->
                    <template slot-scope="scope">
                        <div>{{ scope.row.title }}</div>
                        <div>{{ scope.row.category.name }}</div>
                        <div>{{ scope.row.publishTime | fmtTime }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if='scope.row.status === "审核成功"' type="success">已缴清</el-tag>
                        <el-tag v-else type="danger">未缴纳</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- {{ scope.row }} -->
                        <!-- <el-link @click="toRecommend(scope.row.id, '推荐')" :underline="false" type="warning">推荐</el-link> -->
                        <el-link @click="check(scope.row)" :disabled="scope.row.status !== '未审核'" :underline="false"
                            type="primary" style="margin-left: 20px;">缴纳会费</el-link><br>
                        <el-link @click="toEdit(scope.row)" :underline="false" type="primary"
                            style="margin-left: 20px;">修改信息</el-link>
                        <el-link @click="toDelete(scope.row.id)" :underline="false" type="danger"
                            style="margin-left: 20px;">删除餐厅</el-link>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <!-- 第三行  分页按钮组件 -->
        <div class="page">
            <!-- {{params.pageSize}} -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
                :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 第四行  审核模态框dialog 组件 -->
        <el-dialog title="缴纳会费" :visible.sync="visible" width="50%">
            <!-- 文章标题 -->
            <div style="text-align: center;">待缴纳会费:2000</div>
            <!-- 文章内容 -->
            <!-- <div v-html="article.read_times" style="text-align: center;"></div> -->
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="changeStatus(article.id, '未审核')">取消缴纳</el-button>
                <el-button type="primary" @click="changeStatus(article.id, '审核成功')">缴纳会费</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { get, post } from '@/utils/request'
export default {
    data() {
        return {
            // 表单对象
            form: {},
            //城市
            categories: [],
            // 所有的餐厅
            articleData: [],
            // 餐厅所对应的城市
            category: {},
            //餐厅信息
            params: {
                page: 1,
                pageSize: 5
            },
            //餐厅数量
            total: 0,
            // 控制模态框显示与隐藏的变量
            visible: false,
            article: {},
        }
    },
    watch: {
        form: {
            handler() {
                // 确保获取的栏目(文章分类)是最新的
                this.getCategory()
                this.params.page = 1;
                //只要条件发生改变就发起一个查询请求
                this.getArticle()
            },
            deep: true
        }

    },
    methods: {
        // 下拉框城市列表
        async getCategory() {
            let res = await get('/category/findAll');
            // console.log(res, '获取分类');
            this.categories = res.data
        },
        //分页多条件查询餐厅信息
        async getArticle() {
            //分页  page  pageSize 多条件  title status  categoryId
            let temp = {
                ...this.params,
                ...this.form
                //...把属性全部打开
            }
            // console.log(temp,'temp')
            //判断条件是否存在  不存在删除条件
            for (let key in temp) {
                if (!temp[key]) {
                    delete temp[key]
                }
            }
            let res = await get('/article/pageQuery', temp);
            console.log(res,'asdoadokaodkao')
            this.articleData = res.data.list;
            this.total = res.data.total;
            this.category = res.data.list.category;

        },
        // 当前页码条数发生改变触发
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.pageSize = val;
            this.params.page = 1;
            this.getArticle()
        },
        //当前页码发生改变触发
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.page = val;
            this.getArticle()
        },
        //推荐
        // toRecommend(id, status) {
        //     this.$confirm('此操作将推荐该文章, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(async () => {
        //         //继续推荐   发起一个post请求
        //         let res = await post('/article/changeStatus', { id: id, status: status });//后面的为形参
        //         this.$message({
        //             type: 'success',
        //             message: res.message,
        //         });
        //         console.log(res)
        //         this.getArticle();
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消推荐'
        //         });
        //     });

        // },
        //审核按钮
        check(row) {
            // row-->当前被点击文章的信息
            this.article = { ...row }
            // 解构展开文章信息   赋值给article  在data中声明
            this.visible = true;
        },
        // 会费缴纳
        async changeStatus(id, status) {
            let res = await post('/article/changeStatus', { id, status });
            if (res.status === 200) {
                this.$notify({
                    title: '会费缴纳',
                    type: 'success',
                    message: res.message
                });
                this.getArticle();
                this.visible = false;
            } else {
                return false
            }

        },
        //修改信息
        toEdit(row) {
            this.$router.push({
                path: '/info/publish',
                query: row
            })
        },
        //删除
        toDelete(id) {
            // 使用id接收删除按钮时传过来的scope.row.id
            console.log(id, '当前行的id')
            this.$confirm('此操作将删除该餐厅信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //表示点击了确定按钮  发起删除请求  (形参)=>{函数体}
                // se6对象简写语法  变量名和属性名可以一直简写为属性名 id:id 简写为id
                let res = await get('/article/deleteById', { id })
                this.$message({
                    type: 'success',
                    message: res.message
                });
                // 重新载入数据
                this.getArticle()
                //表示点击了取消按钮  取消删除
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    created() {
        this.getCategory()
        this.getArticle()
    }
}
</script>